<template>
  <div>
    <el-container>
      <SidebarMenu
        :default-active="activeMenu"
        @goToRoleManagement="goToRoleManagement"
        @goToMenuManagement="goToMenuManagement"
        @goToPermissionControl="goToPermissionControl"
        @goToSystemSetting="goToSystemSetting"
        @goToLogManagement="goToLogManagement"
        @goToFileManagement="goToFileManagement"
        @goToArticleManagement="goToArticleManagement"
        @goToUserInfoManagement="goToUserInfoManagement"
      />

      <el-container>
        <el-header>
          <Navbar title="系统设置" :avatar="currentAvatar" />
        </el-header>
        <el-main>
          <el-card class="settings-card">
            <template #header>
              <span class="settings-title">系统设置</span>
            </template>
            <el-table :data="settings" style="width: 100%">
              <el-table-column prop="key" label="设置项"></el-table-column>
              <el-table-column prop="value" label="设置值"></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="text" @click="editSetting(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

    <!-- 编辑设置对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑系统设置" width="500px">
      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="100px">
        <el-form-item label="设置项" prop="key">
          <el-input v-model="editForm.key" disabled />
        </el-form-item>
        <el-form-item label="设置值" prop="value">
          <el-input v-model="editForm.value" placeholder="请输入设置值" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveSetting">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import SidebarMenu from './SidebarMenu.vue';
import Navbar from './CommonNavbar.vue';
const router = useRouter();
const activeMenu = ref('3-1'); // 系统设置菜单项
const editDialogVisible = ref(false);
const editFormRef = ref();



// 系统设置数据
const settings = ref([
  { key: '系统名称', value: '通用管理系统' },
  { key: '版本号', value: 'v1.0.0' },
  { key: '管理员邮箱', value: 'admin@example.com' },
  { key: '系统语言', value: '中文简体' },
  { key: '时区设置', value: 'Asia/Shanghai' },
  { key: '邮件服务器', value: 'smtp.example.com' },
  { key: '文件上传大小限制', value: '10MB' },
  { key: '会话超时时间', value: '30分钟' }
]);

// 编辑表单
const editForm = ref({
  key: '',
  value: ''
});

// 表单验证规则
const editRules = {
  value: [
    { required: true, message: '请输入设置值', trigger: 'blur' }
  ]
};

// 导航方法
const goToRoleManagement = () => {
  router.push('/RoleManagement');
};

const goToMenuManagement = () => {
  router.push('/MenuManagement');
};

const goToPermissionControl = () => {
  router.push('/PermissionControl');
};

const goToSystemSetting = () => {
  router.push('/system');
};

const goToLogManagement = () => {
  router.push('/LogManagement');
};

const goToFileManagement = () => {
  router.push('/FileManagement');
};

const goToArticleManagement = () => {
  router.push('/ArticleManagement');
};

const goToUserInfoManagement = () => {
  router.push('/UserInfoManagement');
};

// 编辑设置
const editSetting = (setting) => {
  editForm.value = { ...setting };
  editDialogVisible.value = true;
};

// 保存设置
const saveSetting = async () => {
  try {
    await editFormRef.value.validate();

    // 更新设置值
    const index = settings.value.findIndex(s => s.key === editForm.value.key);
    if (index !== -1) {
      settings.value[index].value = editForm.value.value;
    }

    ElMessage.success('设置保存成功');
    editDialogVisible.value = false;
  } catch (error) {
    ElMessage.error('请检查表单信息');
  }
};
</script>

<style scoped>

.settings-card {
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
  background: #fff;
  margin-bottom: 18px;
}

.settings-title {
  font-size: 22px;
  font-weight: bold;
  color: #4f46e5;
  letter-spacing: 1px;
}

.el-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
  background: #fff;
}

.el-table th {
  background: #e0e7ff !important;
  color: #4f46e5;
  font-weight: 600;
  font-size: 15px;
}

.el-table tr {
  transition: background 0.2s;
}

.el-table tr:hover > td {
  background: #f1f5ff !important;
}

.el-table .el-button[type="text"] {
  color: #6366f1;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.el-table .el-button[type="text"]:hover {
  background: #e0e7ff;
  color: #3b3b3b;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-card {
  border: none;
  transition: all 0.3s;
}

.el-card:hover {
  box-shadow: 0 4px 20px rgba(80, 120, 200, 0.12);
}
</style>
